<template>
	<su-popup type="center" :isMaskClick="false" :show="show" :show-close="upgradeData?.isforceupdate === 'N'" @close="show = false">
		<view class="content botton-radius">
			<view class="content-top" style="display: flex;justify-content: center;">
				<text class="content-top-text">新版本升级</text>
				<image class="content-top" style="top: 0;" width="100%" mode="widthFix" src="../../../static/bg_top1.png">
				</image>
			</view>
			<view class="content-header"></view>
			<view class="content-body">
				<view class="title">
					<text>更新日志</text>
					<text style="padding-left:20rpx;font-size: 30rpx;color: #666;">v.{{upgradeData.version}}</text>
				</view>
				<view class="body">
					<scroll-view class="box-des-scroll" scroll-y="true">
						<text class="box-des">
							{{upgradeData.updatecontent}}
						</text>
					</scroll-view>
				</view>
				<view class="footer flex-center">
					<view class="" v-if="progress">
						正在更新中... {{progress}}%
					</view>
					<button v-else class="content-button ss-reset-button" style="border: none;color: #fff;" plain @click="downloadPackage">
						立即更新
					</button>
				</view>
			</view>
		</view>

	</su-popup>
</template>

<script setup>
	import {
		onShow
	} from '@dcloudio/uni-app'
	import $api from '@/sheep/api'
	import sheep from '@/sheep'
	import {
		computed,
		ref,
		toRefs
	} from 'vue'
	const show = ref(true)
	const progress = ref(0)
	const upgradeData = ref({})

	const getLocalVersion = () => {
		return new Promise((resolve, reject) => {
			plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
			    const version = widgetInfo.version
			    resolve(version)
			})
		}).catch(err => {
			console.err(err);
		})
	}


	const init = async () => {
		show.value = false
		upgradeData.value = {}
		progress.value = 0
		const res = await $api.common_system.getLastVersion()
		if (res.code !== 0) return
		upgradeData.value = res.data
		const localVersion = await getLocalVersion()
		const latestVersion = res.data.version
		if (localVersion === latestVersion) return
		show.value = true
	}


	const downloadPackage = () => {
		const task = plus.downloader.createDownload(upgradeData.value.androidurl	, {}, (res, status) => {
			console.log('downloadPackage------res',res);
			console.log('downloadPackage------status',status);
			if (status === 200) {
				plus.runtime.install(res.filename)
			}
		})
		task.addEventListener('statechanged', e => {
			if (e && e.downloadedSize > 0) {
				const progress1 = ((e.downloadedSize / e.totalSize) * 100).toFixed(2)
				progress.value = progress1
			}
		}, false)
		task.start()
	}


	onShow(() => {
		init()
	})
</script>

<style lang="scss" scoped>
	.flex-center {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}

	.mask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, .65);
	}

	.botton-radius {
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
	}

	.content {
		position: relative;
		top: 0;
		width: 600rpx;
		background-color: #fff;
		box-sizing: border-box;
		padding: 0 50rpx;
		font-family: Source Han Sans CN;
	}

	.text {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		line-height: 200px;
		text-align: center;
		color: #FFFFFF;
	}

	.content-top {
		position: absolute;
		top: -195rpx;
		left: 0;
		width: 600rpx;
		height: 270rpx;
	}

	.content-top-text {
		font-size: 45rpx;
		font-weight: bold;
		color: #F8F8FA;
		position: absolute;
		top: 100rpx;
		left: 220rpx;
		z-index: 1;
	}

	.content-body {
		position: sticky;
	}

	.content-header {
		height: 70rpx;
	}

	.title {
		font-size: 33rpx;
		font-weight: bold;
		line-height: 38px;
		// margin-top: 200rpx;
	}

	.footer {
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.box-des-scroll {
		box-sizing: border-box;
		/* padding: 0 40rpx; */
		height: 200rpx;
		text-align: left;
	}

	.box-des {
		font-size: 26rpx;
		color: #000000;
		line-height: 50rpx;
	}

	.progress-box {
		width: 100%;
	}

	.progress {
		width: 90%;
		height: 40rpx;
		border-radius: 35px;
	}

	.close-img {
		width: 60rpx;
		height: 60rpx;
		z-index: 1000;
		position: absolute;
		bottom: -120rpx;
		/* left: calc(50% - 70rpx / 2); */
		right: 10rpx;
		top: -195rpx;
	}

	.content-button {
		text-align: center;
		flex: 1;
		font-size: 30rpx;
		font-weight: 400;
		color: #FFFFFF;
		border-radius: 24rpx;
		/* margin: 0 18rpx; */

		height: 80rpx;
		line-height: 80rpx;

		/* background: linear-gradient(to right, #1785ff, #3DA7FF); */
		background-color: #3399FF;
	}

	.flex-column {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>